<template>
  <div class="main-tradebox">
    <div class="main-container">
      <div class="gc_main">
        <div class="container cc_main">
          <!-- 标题栏 -->
          <div class="top_title">
            <h3 class="font-24 font-bold">商户发布广告</h3>
            <p class="font-14">请按要求发布广告，否则您将无法通过或被限制广告权限申请</p>
          </div>
          <!-- 内容部分 -->
          <div class="apform_box shop_form">
            <div class="basics">
              <h2 class="form_title">广告信息编辑</h2>
              <div class="form_box">
                <el-form ref="form" :model="formData" label-width="80px" :label-position="labelPosition" size="medium">
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="币种">
                            <!-- <el-select v-model="trcoin" placeholder="请选择交易币种"  >
                              <el-option :label="item.coin+'单价（CNY）'+item.cny" :value="item.coin" v-for="(item,index) in coinList" :key="index"></el-option>
                            </el-select> -->
                            <el-select v-model="trcoin" placeholder="请选择交易币种" @change="setprice">
                              <el-option
                                v-for="(item,index) in coinList" 
                                :key="index"
                                :label="item.coin + '-----参考单价（CNY）'  +item.cny"
                                :value="item.coin"
                                >
                                <span style="float: left">{{ item.coin }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">单价{{ item.cny }} CNY </span>
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="交易类型">
                            <el-select v-model="formData.type" placeholder="请选择交易类型">
                              <el-option label="买入" value="buy"></el-option>
                              <el-option label="卖出" value="sell"></el-option>
                            </el-select>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="数量">
                            <el-input v-model="formData.number" placeholder="请输入数量" clearable maxlength="11"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="单价">
                            <el-input  v-model="formData.price" placeholder="请输入单价" clearable maxlength="30">
                              <template slot="append">CNY</template>
                            </el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="最小接收金额">
                            <el-input v-model="formData.mincny" placeholder="请输入最小接收金额" clearable maxlength="15"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="grid-content bg-purple">
                          <el-form-item label="交易密码">
                            <el-input v-model="formData.tradpassword" placeholder="请输入交易密码" clearable type="password" maxlength="30"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                  </el-row>  
                  </el-form>
                  <div>
                    <p>收款方式</p>
                    <div class="m-top-15">
                        <el-checkbox v-model="checked1" label="银行卡" border size="medium" :disabled="payData.khyh=='--'"></el-checkbox>
                        <el-checkbox v-model="checked2" label="支付宝" border size="medium" :disabled="payData.zfbimg=='--'"></el-checkbox>
                        <el-checkbox v-model="checked3" label="微信" border size="medium" :disabled="payData.wximg=='--'"></el-checkbox>
                    </div>
                  </div>
                  <div class="tips m-top-15">
                    <p>*请输入合理的价格、数量等信息</p>
                    <div class="myass">
                      <h3 class="font-24">资产信息</h3>
                      <p>币币账户余额: <span>{{myass.userusable||'0.00'}} </span> {{myass.name||'--'}}</p>
                      <p>法币账户余额: <span>{{myass.otherusable||'0.00'}} </span> {{myass.name||'--'}}</p>
                    </div>
                    <div class="myass">
                      <h3 class="font-24">收款信息</h3>
                      <div class="payinfobox">
                          <div class="flex" v-show="payData.bankcard!=''">
                                <p class="">银行卡收款方式信息: </p>
                                <p class="">{{payData.bankcard}}</p> <p class="m-left-10">{{payData.khyh}} </p>
                                <p class=""> {{payData.khzh}} </p> <p class="m-left-10"> {{payData.bankcard}} </p>
                          </div>
                          <div class="flex" v-show="payData.wx!=''">
                                <p class="">微信收款方式信息: </p>
                                <p class="mf15">{{payData.wx}}</p>
                                <p class="seeSkm" @click="seeSkm(payData,1)">点击查看收款码</p>
                          </div>
                          <div class="flex" v-show="payData.zfb!=''">
                                <p class="">支付宝收款方式信息: </p>
                                <p class="mf15">{{payData.zfb}}</p>
                                <p class="seeSkm" @click="seeSkm(payData,2)">点击查看收款码</p>
                          </div>
                        </div>
                    </div>
                  </div>
              </div>
            </div>
          
            <!-- btn -->
            <div class="btnbox">
                <el-button type="primary" :disabled="!checked" @click="Formaddmerchant()">立即申请</el-button>
            </div>
          </div>
          
        </div>
        
        
      </div>
    </div>
    <!-- 弹出收款码 -->
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisibleimg"
      width="30%"
    >
      <div class="proimg">
        <img :src="proimg" alt="" srcset="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleimg = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleimg = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
      checked: false,
      labelPosition: 'top',
      formData: {
        coin: '',
        number: '',
        price: '',
        bankcard: '',
        wx: '',
        zfb:'',
        tradpassword: '',
        type: '',
        mincny: '',
      },
      checked1: false,
      checked2: false,
      checked3: false,
      // 接口字段
      coinList:[],
      myass:{},
      payData:{},
      trcoin:'',
      dialogVisibleimg:false,
      proimg:'',
    }
  },        
  computed: {
    
  },
  watch: {
    formData: {
      handler: function(val, oldVal) {
        console.log("输入的"+val.coin,oldVal.coin);
        for(var key in this.formData){
            if(this.formData[key]) {	
              this.checked=true;
            }else{
              this.checked=false;
            }    
        }
        return
      },
      deep: true
    },
    trcoin: function(val, oldVal){
      console.log("输入的"+val,oldVal);
      this.formData.coin = val;
      let coin =val;
      this.getbalance(coin);
      // let finalArr = this.coinList.filter(item => coin.indexOf(item.coin) < 0);
      // console.log(finalArr);
      // this.formData.price=finalArr[0].cny;
      this.coinList.find(function(value) { 
        console.log(value);
        
        if(value == coin) { 
            //则包含该元素    
            console.log(123456);
            
      }})
      return
    }

  },
  mounted() {
    this.getC2Ccoin();
    this.getmypaytype();
  },
  methods: {
    // 获取c2c币种
    getC2Ccoin() {
      return this.request(this.api.getc2ccoin, {
        showLoading: 0
      }).then(res => {
        console.log(`c2c币种：${JSON.stringify(res)}`);
        if (res.data && res.data.length > 0) {
          this.coinList=res.data;
          return Promise.resolve(res.data);
        }
      });
    },
    //资产余额
    getbalance(coin){
      return this.request(this.api.getbalance,{coin:coin}).then(res => {
        if (res!='') {
          this.myass=res[0];
        }else{
          this.errMsg(res.msg);
          return
        }
      });
    },
    // 查询支付方式
    getmypaytype(){
      return this.request(this.api.getmypaytype,).then(res => {
        if (res.code == "0") {
          this.payData=res.data[0];
          if(this.payData.khzh=='--'){
            this.sellchecked5=false;
            this.checked5=false;
            console.log(this.checked5)
          }else if(this.payData.zfbimg=='--'){
            this.sellchecked6=false;
            this.checked6=false;
            console.log(this.checked6)
          }else if(this.payData.wximg!='--'){
            this.sellchecked7=false;
            this.checked7=false;
            console.log(this.checked7)
          }else{
            this.errMsg('请绑定支付收款方式');
            this.sellCoinBtnPropType=false;
            return false
          }
        }else{
          this.errMsg(res.msg);
          return
        }
      });
    },
    setprice(event, item){
      console.log('item'+event);
    },
    // 信息提交
    Formaddmerchant(){
      if(this.checked1==true){
        this.formData.bankcard='enable';
      }else{
        this.formData.bankcard='disable';
      }
      if(this.checked2==true){
        this.formData.wx='enable';
      }else{
        this.formData.wx='disable';
      }
      if(this.checked3==true){
        this.formData.zfb='enable';
      }else{
        this.formData.zfb='disable';
      }
    
      return this.request(this.api.addc2centrust,this.formData).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "成功");
          this.checked=false; 
        }else{
          this.errMsg(res.msg);
          return
        }
      });
    },
    seeSkm(payData,type){
      console.log(payData);
      this.dialogVisibleimg=true;
      if(type==1){
        this.proimg=payData.wximg;
      }else if(type==2){
        this.proimg=payData.zfbimg;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding:0 0 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  color: $w-txtcor;padding:30px 0;text-align: center;
  h3{font-size: 30px;line-height: 36px;}
  p{font-size: 14px;color: #9aa5b5;line-height: 24x;margin-top: 15px;}
}
.main-container{min-height: 80vh;}
.progs{width: 900px;margin: 0 auto;}
// 内容部分 apform_box
.apform_box{
  .form_title{font-size: 24px;line-height: 30px;margin: 15px 0;}
  .basics{border-top: 1px solid #e5e5e5;margin-top: 0px;}
  .two_card{
    .card_img{
      position: relative;
      img{width: 230px;height: 145px;}
      .img_tips{
        position: absolute;
        width:230px;
        left: 0;
        bottom: 0;
        background: #098af7;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        padding: 5px 0;
      }
    }
  }
}


// btn
.btnbox{
  width: 400px;
  margin: 100px auto 0 auto;
  p{text-align: center;}
  button{margin-top: 30px;display: block;margin: 20px auto 0 auto;width: 200px;}
  .el-checkbox {margin: 0 auto;}
  em{color: #357ce1;}
}
.dress{width: 700px;}
.tips{
  p{color: #4f4f4f;font-size: 12px;line-height: 20px;}
}
.img_toptip{
  p{color: #4f4f4f;font-size: 14px;line-height: 24px;margin-bottom: 10px;}
}
.up_tips{
  p{
    color: #4f4f4f;font-size: 12px;line-height: 20px;
  }
  em{color: #098af7;}
}
.hkb{margin-bottom: 30px;}
.myass{
  h3{padding: 10px 0;}
  p{line-height: 30px;font-size: 16px;}
  span{color: #357ce1;}
}
.payinfobox{
  .flex{
    padding: 10px 0;
    .mf15{margin-left: 15px;}
  }
  .seeSkm{margin-left: 15px;color: #60b8d2;cursor: pointer;text-decoration:underline}
}
.shop_form{
  .el-select {width: 100%;}
}
.proimg{
  img{width: 100%;max-width: 500px;}
}
</style>
